<template>
  <div>
    <h1>添加产品</h1>
    <a-spin :spinning="spinning">
      <!-- 表格开始 -->
      <a-form >
        <a-form-item label="分类" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select style="width: 120px" v-model="spuData.category_id">
            <a-select-option
              :value="item.id"
              v-for="(item, i) in cats"
              :key="i"
            >{{item.category_name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="品牌" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select style="width: 120px" v-model="spuData.brand_id">
            <a-select-option
              :value="item.id"
              v-for="(item, i) in brands"
              :key="i"
            >{{item.brand_name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="快递" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select style="width: 120px" v-model="spuData.express_id">
            <a-select-option
              :value="item.id"
              v-for="(item, i) in express"
              :key="i"
            >{{item.express_name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="商品名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input v-model="spuData.goods_name"/>
        </a-form-item>

        <a-form-item
          label="售价"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input v-model="spuData.sell_price"/>
        </a-form-item>

        <a-form-item
          label="banner图"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input v-model="spuData.banners"/>
        </a-form-item>

        <a-form-item
          label="描述"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-textarea v-model="spuData.desc"/>
        </a-form-item>
        <a-form-item
          label="规格"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-tabs :defaultActiveKey="0">
            <a-tab-pane v-for="(spec, index) in specSource" :tab="spec.name" :key="index">
              <a-checkbox-group :options="spec.values" v-model="specCheckbox"/>
            </a-tab-pane>
          </a-tabs>
        </a-form-item>

        <hr />
        <div v-for="(item, i) in getInputRowBySpecCheckBox"
          :key="i">
          <!-- {{item}} -->
          <a-form-item
            :label="item.map(e => e.spec_value).join('+')"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <div style="display: flex">
              <!-- <input type="hidden" v-model="spuData.sku[i].spec_ids"/> -->
              <a-input v-model="spuData.sku[i].sell_price" placeholder="售价"/>
              <a-input v-model="spuData.sku[i].market_price" placeholder="市场价"/>
              <a-input v-model="spuData.sku[i].stock" placeholder="库存"/>
            </div>
          </a-form-item>
        </div>

        <div style="margin: 50px;text-align:center">
          <a-button type="primary" @click="createGoods">
            创建商品
          </a-button>
        </div>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import * as api from '@/api'
export default {
  data () {
    return {
      spinning: false,
      spuData: {
        category_id: 1,
        brand_id: 1,
        express_id: 1,
        goods_name: '',
        banners: '',
        sell_price: 0,
        desc: '',
        sku: []
      },
      skuData: [],
      brands: [],
      cats: [],
      express: [],

      // 规格
      specCheckbox: [],
      specSource: []
    }
  },
  computed: {
    getCheckSpecWithVaule () {
      let o = []
      this.specSource.map(e => {
        o.push({
          id: e.id,
          name: e.name,
          values: []
        })
      })
      this.specCheckbox.forEach(e => {
        this.specSource.forEach((spec, index) => {
          spec.values.forEach(specValue => {
            if (specValue.id === e) {
              o[index].values.push({
                id: specValue.id,
                spec_value: specValue.spec_value
              })
            }
          })
        })
      })
      return o
    },
    getInputRowBySpecCheckBox () {
      let inputRows = []
      let values = this.getCheckSpecWithVaule.map(e => {
        return e.values
      })

      values = values.filter(item => {
        if (item.length !== 0) {
          return true
        }
      })
      if (values.length === 0) {
        return []
      }

      inputRows = values.reduce((last, current) => {
        // if (last.length === 0) {
        //   return [current]
        // }
        let newArr = []
        current.forEach(curEl => {
          last.forEach(lastEl => {
            if (Object.prototype.toString.call(lastEl) === '[object Array]') {
              newArr.push(
                [...lastEl, curEl]
              )
              return
            }
            let tempArr = []
            tempArr.push(lastEl, curEl)
            newArr.push(
              tempArr
            )
          })
        })
        return newArr
      })

      inputRows = inputRows.map(e => {
        if (Object.prototype.toString.call(e) === '[object Object]') {
          return [e]
        }
        return e
      })

      return inputRows
    }
  },
  mounted () {
    Promise.all([
      api.getGoodsBrand(),
      api.getGoodsCat(),
      api.getGoodsExpress()
    ]).then(([brands, cats, express]) => {
      this.brands = brands.data
      this.cats = cats.data
      this.express = express.data

      return api.getGoodsSpecWithValue()
    }).then(response => {
      let specValue = response.data.specValue
      let o = []
      response.data.spec.forEach(e => {
        let values = []
        specValue.forEach(sv => {
          if (sv.spec_id === e.id) {
            values.push({
              id: sv.id,
              spec_value: sv.spec_value,
              label: sv.spec_value,
              value: sv.id
            })
          }
        })
        o.push({
          id: e.id,
          name: e.spec_name,
          values
        })
      })

      this.specSource = o
    })
  },
  methods: {
    handleSpecChange () {
      console.log(this.specCheckbox)
    },
    // 创建商品
    createGoods () {
      // console.log(this.spuData)

      api.addGoods(this.spuData).then(r => {
        console.log(r)
      })
    }
  },
  watch: {
    getInputRowBySpecCheckBox (newValue) {
      let count = newValue.length
      let data = []
      for (let index = 0; index < count; index++) {
        data.push({
          ids: newValue[0].map(e => e.id).join(','),
          sell_price: '',
          market_price: '',
          stock: ''
        })
      }

      this.spuData.sku = data
    }
  }
}
</script>

<style>
</style>
